<template>
<!-- 这里是首页里德图片点进去的详情页 -->
  <div v-if="product">
    <div class="product">
      <div class="product-image">
        <img :src="product.image">
      </div>
      <div class="product-image-center">
        <div class="center-top">
          <img :src="product.imagetopleft">
        </div>
        <div class="center-bottom">
          <img :src="product.imagebottomleft">
        </div>
      </div>
      <div class="product-image-right">
        <div class="right-top">
          <img :src="product.imagetopright">
        </div>
        <div class="right-bottom">
          <img :src="product.imagebottomright">
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="container zhuti-left">
      <!-- 第二部分左边 -->
      <div class="product-info">
        <div class="product-namexiao">{{ product.namexiao }}</div>
        <h1 class="product-name">{{ product.name }}</h1>
        <div class="yaoqiu">
          <div class="product-peizhi glyphicon glyphicon-hand-right">{{ product.peizhi }}</div>
          <div class="product-peizhione glyphicon glyphicon-user">{{ product.peizhione }}</div>
        </div>
        <div class="product-fanyi">将房源描述翻译为中文 (简体)</div>
        <!-- 房东信息 -->
        <div class="product-fangdong">
          <div class="product-fangdong-img">
            <img :src="product.fangdongimg">
          </div>
          <div class="product-fangdong-xinxi">
            <div class="fangdong-name">
              <span>房东：{{ product.fangdongxinxi}}</span>
              <span class="lianxi">联系房东</span>
            </div>
            <div class="pingjia">{{product.yipingjia}}</div>
          </div>
        </div>
        <!-- 房源介绍 -->
        <div class="product-fangyuanjieshao">
          {{ product.fangyuanjieshao }}
          <div class="gengduo">更多的房源介绍</div>
        </div>
        <!-- 详细介绍 -->
        <div>
          <div class="zhengtao" id="gongyu">
            <span class="zhengtao-left">整套房子/公寓</span>
            <span class="zhengtao-right">{{product.zhengtao}}</span>
          </div>
          <div class="fangdong">
            <span class="zhengtao-left">超赞房东</span>
            <span class="zhengtao-right">{{product.fangdong}}</span>
          </div>
          <div class="zhufang">
            <span class="zhengtao-left">入住/退房</span>
            <span class="zhengtao-right">{{product.zhufang}}</span>
          </div>
          <div class="zidong">
            <span class="zhengtao-left">自助入住</span>
            <span class="zhengtao-right">{{product.zidong}}</span>
          </div>
        </div>
        <!-- 中间的wifi图片 -->
        <div class="wifi">
          <img src="../image/WiFi.jpg" alt>
        </div>
        <!-- 评价 -->
        <div class="pingjia">
          <!-- 评价第一块 -->
          <div class="pingjia-top">
            <div class="pingjia-title">评价</div>
            <div class="pingjia-dafen">
              <div class="pingjia-star">
                <img src="../image/star.jpg" alt>
              </div>
              <div class="pingjia-renshu">{{product.star}}</div>
            </div>
            <div class="pingjia-xiangxi">
              <div class="pingjia-xiangxi-left">
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">如实描述</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star.jpg" alt>
                  </div>
                </div>
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">沟通交流</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star-one.jpg" alt>
                  </div>
                </div>
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">干净卫生</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star.jpg" alt>
                  </div>
                </div>
              </div>
              <div class="pingjia-xiangxi-right">
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">位置便利</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star.jpg" alt>
                  </div>
                </div>
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">入住顺利</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star.jpg" alt>
                  </div>
                </div>
                <div>
                  <div class="xiangxi-left-left pingjia-renshu">性价比高</div>
                  <div class="xiangxi-left-right pingjia-star">
                    <img src="../image/star-one.jpg" alt>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 评价第二块 -->
          <div class="pingjia-center">
            <div class="center-xuanze">
              <button class="center-xuanze-xiangxi active">全部492</button>
              <button class="center-xuanze-xiangxi">房东热情好客86</button>
              <button class="center-xuanze-xiangxi">入住感好33</button>
              <button class="center-xuanze-xiangxi">位置便利23</button>
              <button class="center-xuanze-xiangxi">干净卫生10</button>
              <button class="center-xuanze-xiangxi">设备设施8</button>
              <button class="center-xuanze-xiangxi">装修设计3</button>
            </div>
          </div>
          <!-- 用户评价详细信息 -->
          <!-- 第一个用户评价 -->
          <div class="product-fangdong">
            <div class="product-yonghu-img">
              <img :src="product.yonghuimg">
            </div>
            <div class="product-fangdong-xinxi">
              <div class="fangdong-name">
                <span>{{ product.yonghu}}</span>
              </div>
              <div class="shijian">{{product.shijian}}</div>
            </div>
          </div>
          <!-- 房源介绍 -->
          <div class="product-yonghu-pingjia">{{ product.yhpjneirongtwo }}</div>
          <!-- 第二个用户评价 -->
          <div class="product-fangdong">
            <div class="product-yonghu-img">
              <img :src="product.yonghuimgtwo">
            </div>
            <div class="product-fangdong-xinxi">
              <div class="fangdong-name">
                <span>{{ product.yonghutwo}}</span>
              </div>
              <div class="shijian">{{product.shijiantwo}}</div>
            </div>
          </div>
          <!-- 房源介绍 -->
          <div class="product-yonghu-pingjia">{{ product.yhpjneirongtwo }}</div>
          <!-- 第三个用户评价 -->
          <div class="product-fangdong">
            <div class="product-yonghu-img">
              <img :src="product.yonghuimgthree">
            </div>
            <div class="product-fangdong-xinxi">
              <div class="fangdong-name">
                <span>{{ product.yonghuthree}}</span>
              </div>
              <div class="shijian">{{product.shijianthree}}</div>
            </div>
          </div>
          <!-- 房源介绍 -->
          <div class="product-yonghu-pingjia">{{ product.yhpjneirongthree }}</div>
          <!-- 第四个用户评价 -->
          <div class="product-fangdong">
            <div class="product-yonghu-img">
              <img :src="product.yonghuimgfour">
            </div>
            <div class="product-fangdong-xinxi">
              <div class="fangdong-name">
                <span>{{ product.yonghufour}}</span>
              </div>
              <div class="shijian">{{product.shijianfour}}</div>
            </div>
          </div>
          <!-- 房源介绍 -->
          <div class="product-yonghu-pingjia">{{ product.yhpjneirongfour }}</div>
          <!-- 第五个用户评价 -->
          <div class="product-fangdong">
            <div class="product-yonghu-img">
              <img :src="product.yonghuimgfive">
            </div>
            <div class="product-fangdong-xinxi">
              <div class="fangdong-name">
                <span>{{ product.yonghufive}}</span>
              </div>
              <div class="shijian">{{product.shijianfive}}</div>
            </div>
          </div>
          <!-- 房源介绍 -->
          <div class="product-yonghu-pingjia">{{ product.yhpjneirongfive }}</div>
        </div>
        <div class="fenye">
          <el-pagination class="fenye-yangshi" ackground layout="prev, pager, next" :total="710"></el-pagination>
          <div class="fenye-gengduo">房东收到的其他评价</div>
        </div>
        <div class="rili">
          <div class="rili-title">查看预定日期</div>
          <el-calendar v-model="value"></el-calendar>
        </div>
        <!-- <div class="product-cost">¥ {{ product.cost }}</div>
        <div class="product-add-cart" @click="handleAddToCart">加入购物车</div>-->
      </div>
      <!-- 第二部分右边 -->

      <div class="product-info-right">
        <div class="right-guding">
          <div class="right-guding-margin">
            <!-- 第一块 -->
            <div class="giding-jiage">
              <span class="jiage-left">￥{{product.gdjiage}}</span>
              <span class="jiage-right">每晚</span>
            </div>
            <!-- 第二块 -->
            <div class="jiege-pic">
              <img src="../image/youbian-right.png" alt>
            </div>
            <!-- 第三块 -->
            <div class="left-ping">
              <span class="left-ping-img">
                <img src="../image/star.jpg" alt>
              </span>
              <span class="left-ping-renshu">{{product.tiaoshu}}</span>
            </div>
            <!-- 第三块下面的横线 -->
            <div class="hengxian"></div>
            <!-- 第四块选择时间 -->
            <!-- 选择时间 -->
            <div class="yuding-riqi">
              <div class="yuding-riqi-title">日期</div>
              <div class="yuding-riqi-neirong">
                <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                  <el-col :span="11">
                    <el-date-picker
                      type="date"
                      placeholder="入住日期"
                      v-model="sizeForm.date1"
                      style="width: 100%;"
                    ></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2">
                    <img src="../image/right-jiantou.png" alt>
                  </el-col>
                  <el-col :span="11">
                    <el-date-picker
                      type="date"
                      placeholder="退房日期"
                      v-model="sizeForm.date2"
                      style="width: 100%;"
                    ></el-date-picker>
                  </el-col>
                </el-form>
              </div>
            </div>
            <!-- 选择人数 -->
            <div class="yuding-renshu">
              <div class="yuding-renshu-title">人数</div>
              <div class="yuding-renshu-neirong">
                <el-select v-model="sizeForm.region" class="renshu-neirong-kuai" placeholder="1人">
                  <el-option label="1人" value="one"></el-option>
                  <el-option label="2人" value="two"></el-option>
                  <el-option label="3人" value="three"></el-option>
                  <el-option label="4人" value="four"></el-option>
                  <el-option label="5人及以上" value="five"></el-option>
                </el-select>
              </div>
            </div>
            <!-- 预定 -->
            <div class="liji-yuding">
              <el-button type="primary" @click="onSubmit">预定</el-button>
            </div>
            <div class="shoufei-tixing">您暂时不会被收费</div>
            <!-- 横线 -->
            <div class="hengxian-bottom"></div>
            <!-- 优惠信息 -->
            <div class="_ppgibgk">
              <div
                class="_xcj0dpa"
                style="background-image: url(&quot;https://z1.muscache.cn/airbnb/static/packages/icon-uc-alarm.e0a2b02f.gif&quot;);"
              >
                <div class="_11wv9ay">
                  <span class="_1lcyzyhk">6月10日 - 6月24日优惠10%</span>
                  <div style="margin-top: 6px;">在未来13天内预订即可享受此特别优惠。</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      
    </div>
    <footerone></footerone>
  </div>
  
</template>

<script>
import product_data from "../lib/xiangqing.js";
import footerone from "../views/footerone.vue";
// import product_data from "../lib/xiangqing.js";
export default {
   components: {
    footerone,
  },
  data() {
    return {
      sizeForm: {
        region: "",
        date1: "",
        date2: ""
      },
      value: new Date(),
      // 获取路由中的参数
      id: parseInt(this.$route.params.id),
      product: null
    };
  },
  // created(){
  //   this.$http.get('http://localhost:3000/../)
  // }
  methods: {
    getProduct() {
      // 真实环境通过 ajax 获取，这里用异步模拟
      setTimeout(() => {
        this.product = product_data.find(item => item.id === this.id);
      });
    },
    // 加入购物车
    handleAddToCart() {
      this.$store.commit("addCart", this.id);
    },
    onSubmit() {
      console.log("submit!");
    }
  },
  mounted() {
    this.getProduct();
  }
};
</script>

<style scoped>
/* 自己写的样式 */

.product-namexiao {
  color: rgb(88, 76, 62);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3em;
  margin-top: 40px;
  /* text-align: left; */
}

.product-peizhi,
.product-peizhione {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.375em;
  color: rgb(72, 72, 72);
}

.product-peizhi {
  margin-right: 20px;
}

.yaoqiu {
  padding-bottom: 30px;
  border-bottom: 1px solid #ebebeb;
}

.product-fanyi {
  width: 100%;
  height: 30px;
  border: 1px solid #484848;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(72, 72, 72);
  border-radius: 4px;
  margin-top: 20px;
}

.product-fangdong {
  margin: 32px 0px 16px 0px;
  height: 60px;
  /* border: 1px solid rebeccapurple; */
  /* overflow: hidden; */
}

.product-fangdong-img {
  width: 60px;
  height: 60px;
  margin: 0px 10px 10px 0px;
  display: inline-block;
}

.product-fangdong-img img {
  border-radius: 50%;
  margin-top: -30px;
}

.product-fangdong-xinxi {
  display: inline-block;
  height: 60px;
}

.fangdong-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  /* line-height: 60px; */
  color: rgb(72, 72, 72) !important;
  /* margin-bottom: 10px; */
  margin-top: 10px;
}

.fangdong-name span {
  margin-bottom: 10px;
}

.fangdong-name .lianxi {
  color: rgb(0, 132, 137);
}

.pingjia {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.28571em !important;
  color: rgb(72, 72, 72) !important;
  margin-top: 10px;
}

.product-fangyuanjieshao {
  width: 100%;
  padding: 16px;
  border-radius: 5px;
  background: #f8f8f8;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.375em !important;
  color: rgb(72, 72, 72) !important;
  padding-bottom: 20px;
  border: 1px solid #ebebeb;
}

.product-fangyuanjieshao .gengduo {
  color: #008489;
  margin-top: 15px;
  font-weight: 800;
}

.zhengtao {
  height: 30px;
  border-top: 1px solid #ebebeb;
  margin-top: 30px;
}

#gongyu {
  height: 42px;
}

.zhengtao-left {
  width: 20%;
  height: 22px;
  display: inline-block;
  margin: 10px 0px;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.375em !important;
  color: rgb(72, 72, 72) !important;
}

.zhengtao-right {
  width: 80%;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.375em !important;
  color: rgb(72, 72, 72) !important;
}

.wifi {
  margin: 20px 0px 72px 0px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.pingjia-center {
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  padding: 20px 0px;
}

.pingjia-title {
  margin-bottom: 32px;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25em !important;
  color: rgb(72, 72, 72) !important;
}

.pingjia-dafen {
  width: 100%;
  height: 40px;
}

.pingjia-star {
  width: 110px;
  display: inline-block;
}

.pingjia-star img {
  width: 100%;
  display: inline-block;
}

.pingjia-renshu {
  height: 19px;
  display: inline-block;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.375em !important;
  color: rgb(72, 72, 72) !important;
}

.pingjia-xiangxi-left {
  width: 50%;
  /* background: rebeccapurple; */
  display: inline-block;
}

.xiangxi-left-left {
  width: 50%;
  height: 44px;
  display: inline-block;
}

.pingjia-xiangxi-right {
  width: 50%;
  /* background: red; */
  display: inline-block;
  margin-left: -4px;
}

.center-xuanze-xiangxi {
  height: 32px;
  padding: 0 8px;
  margin: 10px 10px 10px 0px;
  background: rgba(0, 132, 137, 0.08);
  border: none;
  border-radius: 6px;
  color: rgb(0, 132, 137);
}

.active {
  color: white;
  background: rgb(0, 132, 137);
}

/* 用户评价一整块 */

.product-yonghu-img {
  width: 44px;
  height: 44px;
  margin: 0px 15px 10px 0px;
  display: inline-block;
}

.product-yonghu-img img {
  border-radius: 50%;
  margin-top: -30px;
}

.shijian {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.28571em !important;
  color: rgb(72, 72, 72) !important;
  margin-top: 5px;
}

.product-yonghu-pingjia {
  width: 100%;
  padding: 0px 0px 16px 0px;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.375em !important;
  color: rgb(72, 72, 72) !important;
  padding-bottom: 32px;
  border-bottom: 1px solid #ebebeb;
}

.fenye {
  width: 100%;
  height: 34px;
  overflow: hidden;
  margin-top: 24px;
}

.fenye-yangshi {
  width: 60;
  height: 32px;
  display: inline-block;
}

.fenye-gengduo {
  width: 40%;
  height: 32px;
  display: inline-block;
  padding-left: 125px;
  color: #008489;
  font-weight: 800;
  font-size: 14px;
}

.fenye-gengduo:hover {
  text-decoration-line: var(
    --font-link-text-decoration-line-hover,
    underline
  ) !important;
  color: #008489 !important;
}

.rili {
  margin-top: 72px;
}

.rili-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25em !important;
  color: rgb(72, 72, 72) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  margin-bottom: 32px;
}

.product-info-right {
  width: 38%;
  height: 3070px;
  /* background: red; */
  display: inline-block;
  position: relative;
  margin-top: 40px;
}
.right-guding-margin {
  margin: 16px 0px;
}
.right-guding {
  width: 100%;
  height: 488px;
  border: 1px solid #e4e4e4;
  padding: 0px 24px;
  /* position: fixed;
  top: 0px; */
}
.giding-jiage {
  width: 100%;
  height: 28px;
}
.jiage-left {
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: rgb(72, 72, 72) !important;
}
.jiage-right {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgb(72, 72, 72) !important;
}
.left-ping {
  width: 100%;
  height: 10px;
  display: inline-block;
}
.left-ping-img {
  width: 50px;
  height: 10px;
  display: inline-block;
  margin-left: 4px;
}
.left-ping-img img {
}
.left-ping-renshu {
  display: inline-block;
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.33333em !important;
  color: rgb(72, 72, 72) !important;
}
.hengxian {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 16px 0;
}
.hengxian-bottom {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 24px 0;
}
.yuding-riqi-title,
.yuding-renshu-title {
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.33333em !important;
  color: rgb(72, 72, 72) !important;
  margin: 10px 0px;
}
.yuding-riqi-neirong,
.yuding-renshu-neirong {
  width: 100%;
  height: 40px;
}
.liji-yuding {
  margin: 24px 0px 8px 0px;
}
.renshu-neirong-kuai {
  width: 100%;
  height: 40px;
}
.liji-yuding button {
  width: 100%;
  height: 46px;
  background: rgb(255, 90, 95);
  border: none;
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.375em !important;
  color: rgb(255, 255, 255) !important;
}
.shoufei-tixing {
  width: 100%;
  height: 20px;
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.33333em !important;
  color: rgb(72, 72, 72) !important;
  text-align: center;
}
._ppgibgk {
  overflow-wrap: break-word !important;
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.28571em !important;
  color: rgb(72, 72, 72) !important;
  margin: 0px !important;
}

._xcj0dpa {
  background-size: 48px !important;
  margin-top: 0px !important;
  transition: margin-top 0.4s ease 0s !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}
._11wv9ay {
  min-height: 34px !important;
  width: 84% !important;
}
._1lcyzyhk {
  overflow-wrap: break-word !important;
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC" !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.28571em !important;
  color: rgb(72, 72, 72) !important;
  margin: 0px !important;
}
/* .zuihou-youhui{
  width: 100%;
  height: 42px;
  border: 1px solid red;
}
.youhui-left{
  width: 70%;
  height: 42px;
  background: rosybrown;
  display: inline-block;
}
.youhui-right{
  width: 30%;
  height: 42px;
  display: inline-block;
}
.youhui-right img{
  width: 100%;
  height:42px;
  display: inline-block;
} */
/* 之前就有的样式 */

img {
  width: 100%;
  height: 100%;
}

.product-image-center {
  width: 25%;
  height: 550px;
  display: inline-block;
}

.product-image-right {
  width: 25%;
  height: 550px;
  margin-left: -4px;
  display: inline-block;
}

.center-top,
.center-bottom {
  width: 100%;
  height: 275px;
  background: rebeccapurple;
  /* border: 1px solid black */
}

.center-top img {
  width: 100%;
  height: 100%;
}

.right-top,
.right-bottom {
  width: 100%;
  height: 275px;
  background: rebeccapurple;
  /* border: 1px solid black */
}

.product {
  background: #fff;
}

.product-name {
  text-align: left;
  font-size: 32px;
  font-weight: 800;
  color: rgb(72, 72, 72);
  line-height: 1.125em;
  padding-top: 6px 0px;
  margin: 5px 0px 15px 0px;
}

.product-image {
  width: 50%;
  height: 550px;
  float: left;
  text-align: center;
  display: inline-block;
}

.product-image img {
  width: 100%;
  height: 100%;
}

.zhuti-left {
  padding: 0px 50px;
  overflow: hidden;
}

.product-info {
  width: 56%;
  /* padding: 150px 0 250px; */
  padding-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
  /* height: 150px; */
  float: left;
  margin-right: 6%;
  display: inline-block;
  /* text-align: center; */
}

.product-cost {
  color: #f2352e;
  margin: 8px 0;
}

.product-add-cart {
  display: inline-block;
  padding: 8px 64px;
  margin: 8px 0;
  background: #2d8cf0;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.product-desc {
  background: #fff;
  margin: 32px;
  padding: 32px;
  border: 1px solid #dddee1;
  border-radius: 10px;
  text-align: center;
}

.product-desc img {
  display: block;
  width: 50%;
  margin: 32px auto;
  padding: 32px;
  border-bottom: 1px solid #dddee1;
}
</style>